<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name required">优惠券金额</span>
            <span class="value">
               <el-select v-model="couponInfo.couponPrice" clearable placeholder="选择优惠金额" style="width: 130px; ">
                    <el-option 
                    v-for="(item,index) in selectOptions.couponValue"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
          </div>
          <div class="item">
            <span class="name required">满足优惠的订单金额</span>
            <span class="value">
              <el-input type="number" min="0" max="1000000"  v-model="couponInfo.overPrice"  style="width: 130px;"></el-input>元
            </span>
          </div>
          <div class="item">
            <span class="name required">过期时间</span>
            <span class="value">
              <el-date-picker
                    v-model="couponInfo.overTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="selectOptions.pickerOptions">
                    </el-date-picker>
            </span>
          </div>
          <div class="item">
            <span class="name required">发放数量</span>
            <span class="value">
              <el-input type="number" min="0" max="1000000"  v-model="couponInfo.count"  style="width: 130px;"></el-input>
            </span>
          </div>


          
          <div class="item">
            <span class="name"></span>
            <span class="value">
              <el-button type="primary" @click="handleSave()">保存</el-button>
            </span>
          </div>
          <!--- end -->
      </div>
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as shopApi from '@/api/shop'
import * as couponApi from '@/api/coupon'
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'


const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'CouponInfoEditShop',
  components: {
    BxImage
  },
  data() {
    return {
      couponInfo:{
        //id:guid.empty,
        couponPrice:0,
        overPrice:0,
        overTime:'',
        count:0
      },
      selectOptions:{
          couponValue:[
              {label:'10元',value:'10'},
              {label:'20元',value:'20'},
              {label:'50元',value:'50'},
              {label:'100元',value:'100'},
              {label:'200元',value:'200'},
          ],
          pickerOptions: {
            disabledDate(time) {
                return time.getTime() < Date.now();
            },
            shortcuts: [{
                text: '一周后',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '15天后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 15);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一个月后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '两个月后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 61);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '半年后',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', date);
                    }
                }
            ]
            },
      }
    }
  },
  computed: {
    
  },
  created() {
    
    
  },
  methods: {
    
    //保存
    handleSave(){
      var that=this;
      var errorMsg=[];
      if(!that.couponInfo.couponPrice){
        errorMsg.push('请选择优惠券金额');
      }

      if(!that.couponInfo.overPrice){
        errorMsg.push('请填写优惠券满足金额');
      }
      if(that.couponInfo.overPrice<=that.couponInfo.couponPrice){
        errorMsg.push('满足订单金额须大于优惠券金额');
      }
      if(!that.couponInfo.overTime || that.couponInfo.overTime<=new Date()){
        errorMsg.push('过期时间须大于当前时间');
      }
      if(!that.couponInfo.count){
        errorMsg.push('请填写正确的发放数量');
      }

      if(errorMsg.length>0){
        var errorHtml='<p class="errorbox-item">'+errorMsg.join('</p><p class="errorbox-item">')+'</p>';
        that.$notify({
          title: '验证未通过',
          dangerouslyUseHTMLString: true,
          position: 'bottom-left',
          message: errorHtml
        });
        return;
      }
      
      //处理下时间
      that.couponInfo.outTime=parseTime(that.couponInfo.overTime,'{y}-{m}-{d}');
      couponApi.addCoupon(that.couponInfo).then(res=>{
        if(res.data){
          that.$message({
            message: '保存成功！',
            type: 'success'
          });
          this.$notify({
            title: '提示',
            type: 'success',
            message: '优惠券【'+that.couponInfo.overPrice+'-'+that.couponInfo.couponPrice+'】新增成功。',
            duration: 60000
            });
        }
      })
    }
  }
}
</script>

